<template>
    <view class="content">
        <image src="../../static/icon/logo_02.png" class="logo-02"></image>
        
        <view style="margin-top: 50rpx;" >
            <view class="padding-tb-lg border1">
                <input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb border1 flex align-center justify-between">
                <input class="flex-sub margin-right" type="number" placeholder="请输入验证码" v-model="code"
                    placeholder-class="text-lg text-gray" />
                <view class="code" :class="{ activeCode: time < 60 }" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
            </view>
            <view class="padding-tb-lg border1">
                <input type="password" v-model="password" placeholder="请输入新密码" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb-lg border1">
                <input type="password" v-model="comPassword" placeholder="再次输入新密码" placeholder-class="text-lg text-gray" />
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSubmit)">确认提交</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,
                mobile: '',
                code: '', //验证码
                password: '', //密码
                comPassword: '',
                time: 60, // 倒计时
                txt: '发送验证码',
            };
        },
        onLoad() {},
        methods: {
            doSubmit() {
                if (!this.mobile) {
                    this.$toast('请输入手机号！');
                    return false;
                }
                if (!this.$checkPhone(this.mobile)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!this.code) {
                    this.$toast('请输入验证码！');
                    return false;
                }
                if (!this.password) {
                    this.$toast('请输入密码！');
                    return false;
                }
                if (!this.comPassword) {
                    this.$toast('请输入确认密码！');
                    return false;
                }
                if (this.password != this.comPassword) {
                    this.$toast('两次输入的密码不一致！');
                    return false;
                }
                this.$ajax('forget_password', {
                    phone: this.mobile,//手机号
                    verify_code: this.code,//验证码
                    password: this.password,//密码
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('密码修改成功，请重新登录！');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取验证码
            getCode() {
                let _this = this;
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                    phone: _this.mobile,
                    // type: 1 ,// 1-登录 2-注册 3-找回密码 4-绑定手机号 5-修改密码
                }).then(ret => {
                    if (ret.success == 1000) {
                        _this.txt = _this.time + 'S后可再次获取';
                        let fn = setInterval(() => {
                            _this.time--;
                            _this.txt = _this.time + 'S后可再次获取';
                            if (_this.time == 0) {
                                clearInterval(fn);
                                _this.time = 60;
                                _this.txt = '获取验证码';
                            }
                        }, 1000);
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .tip2{
        color: #999999;
    }
    .tip{
        color: #fe6155;
    }
    .border1 {
        border-bottom: 2rpx solid #eaebf0;
    }
    .code {
        background-color: #efefef;
        font-size: 30rpx;
        color: #848383;
        border-radius: 50rpx;
        width: 300rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
    }
    .activeCode {
        background: #cccccc;
        color: #fff;
    }
    .frame {
        width: 33rpx;
        height: 33rpx;
        border-radius: 50%;
        border: 1rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;
    
        /deep/ u-icon {
            transform: scale(0);
            position: absolute;
            top: -7%;
            left: -2%;
        }
    }
    .activeIcon {
        /deep/ u-icon {
            transform: scale(1);
        }
    }
    .btn {
        border-radius: 50rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 34rpx;
        background-color: #00a1e9;
        margin: 100rpx auto 0;
        color: #FFFFFF;
    }
    
    
    
    .content{
        padding: 55rpx 50rpx;
    }
    .logo-02{
        width: 287rpx;
        height: 104rpx;
        margin: 0 auto 65rpx;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-i{
        width: calc(650rpx / 2);
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        position: relative;
    }
    .active{
        font-size: 34rpx;
        color: #00a1e9;
    }
    .active::after{
        display: block;
        content: '';
        width: 120rpx;
        height: 5rpx;
        background-color: #00a1e9;
        position: absolute;
        bottom: -15rpx;
        left: 160rpx;
        transform: translateX(-50%);
    }
    
    
    
</style>
